<template>
<div id="map" class="mapC"></div>
</template>

<script>
import 'ol/ol.css'
import Stamen from 'ol/source/Stamen'
import TileLayer from 'ol/layer/Tile'
import {Circle, Fill, Style} from 'ol/style'
import {Map, View} from 'ol/index'
import {Point} from 'ol/geom'
import {getVectorContext} from 'ol/render'
import {upAndDown} from 'ol/easing'
import {useGeographic} from 'ol/proj'
export default {
  name: 'index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      useGeographic()
      const layer = new TileLayer({
        source: new Stamen({
          layer: 'toner'
        })
      })

      const map = new Map({
        layers: [layer],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      })

      const image = new Circle({
        radius: 8,
        fill: new Fill({color: 'rgb(255, 153, 0)'})
      })

      const style = new Style({
        image: image
      })

      const n = 1000
      const geometries = new Array(n)

      for (let i = 0; i < n; ++i) {
        const lon = 360 * Math.random() - 180
        const lat = 180 * Math.random() - 90
        geometries[i] = new Point([lon, lat])
      }

      layer.on('postrender', function (event) {
        const vectorContext = getVectorContext(event)
        for (let i = 0; i < n; ++i) {
          const importance = upAndDown(Math.pow((n - i) / n, 0.15))
          if (importance < 0.1) {
            continue
          }
          image.setOpacity(importance)
          image.setScale(importance)
          vectorContext.setStyle(style)
          vectorContext.drawGeometry(geometries[i])
        }

        const lon = 360 * Math.random() - 180
        const lat = 180 * Math.random() - 90
        geometries.push(new Point([lon, lat]))
        geometries.shift()
        map.render()
      })
    }
  }
}
</script>

<style scoped>

</style>
